<script setup lang="ts" name="XtxButton">
defineProps({
  type: {
    type: String,
  },
  size: {
    type: String,
  },
  round: {
    type: Boolean,
  },
  disabled: {
    type: Boolean,
  },
})
</script>
<template>
  <button class="xtx-button" :class="[type, size, round ? 'round' : '',disabled ? 'disabled' : '',]"
    :disabled="disabled">
    <slot></slot>
  </button>
</template>
<style lang="less" scoped>
.xtx-button {
  border: none;
  border: 1px solid #ccc;
  padding: 12px 20px;
  border-radius: 5%;
  font-size: 14px;

  &.primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
  }

  &.success {
    background-color: #85ce61;
    border-color: #85ce61;
    color: #fff;
  }

  &.danger {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;

    &.disabled {
      color: #fff;
      background-color: #fab6b6;
      border-color: #fab6b6;
    }
  }

  &.medium {
    padding: 10px 20px;
  }

  &.small {
    padding: 9px 15px;
    font-size: 12px;
  }

  &.mini {
    padding: 7px 15px;
    font-size: 12px;
  }

  &.round {
    border-radius: 20px;
  }

  &.disabled {
    cursor: not-allowed;
    color: #c0c4cc;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5
  }

}
</style>